MySQL과 연동

✒️ 2025-05-26 15:06 내용 수정

MongoDB와 MySQL 중에 사용할 DB로 연결해준다.
MongoDB 연결은 Resources/Web/Nodejs/DB와 연동/MongoDB/MongoDB와 연동 참고.

MySQL 연결

새 프로젝트를 생성한다면 express, nodemon, ejs를 먼저 설치해서 환경 설정부터 해준다.
- Nodejs 환경 설정 참고.

// express 설치
npm install express

// nodemon 설치(글로벌 설정)
npm install -g nodemon

// ejs
npm install ejs

// 한 줄로 작성하면
npm install express nodemon ejs

VSC 터미널에서 npm i mysql2를 입력해서 mysql2 라이브러리를 설치한다.
- MySQL과 연동하던 중 Authentication Method 오류가 발생해서 mysql를 삭제하고 설치했다.
- Node.js와 연동 시 Authentication method 에러 발생#2-1. Node.js에서 mysql 라이브러리 대신 mysql2 설치 참고.
- mysql이 설치되어 있다면 npm un mysql로 제거하고 진행했다.
server.js 파일을 생성하고, 서버 설정 및 db 연결 구문을 작성한다.
- 먼저 포트 연결 결과를 확인하기 위해 console에 내용을 출력한다.
- 연결을 먼저 확인하기 위해 createConnection으로 connection을 생성했다.

// 1. module require 
// express
const express = require('express');
// app 생성
const app = express();

// mysql2를 사용
const mysql = require('mysql2');

// MySQL과 연결할 정보
const connection = mysql.createConnection({
    host : 'localhost',
    user : 'root',
    password : '비밀번호',
    database : 'DB이름',
    port : '3307' // 3306이 이미 사용중면 다른 번호로 지정
});

// MySQL과 연결
connection.connect(
    function(error) {
        if(error) throw error; // 에러가 생기면 던짐
        console.log('MySQL 연결 성공'); // 연결되면 log 생성
    }
);

// 2. listen - 서버 포트 연결
app.listen(8080, () => {
    console.log('접속 : http://localhost:8080')
});

nodejs_mysql 1.png

이제 데이터베이스와 연결해서 데이터를 가져오고, ejs 라이브러리를 사용해서 HTML에 데이터를 출력한다.
- ~~2024.02.02 해결 : MySQL을 사용할 때 이 부분에서 인증 문제가 발생했는데, 오류가 쉽사리 해결되지 않았다.~~
- Node.js와 연동 시 Authentication method 에러 발생 참고.
- ejs를 사용한다면 데이터를 보여줄 페이지 파일인 .ejs 파일들은 모두 views 폴더에 작성해야 한다.

// 1. module require 
// express
const express = require('express');
const app = express();

// 2. use, set
// public 폴더엔 css 파일과 image 폴더가 있다
app.use(express.static(__dirname + '/public'));
// view engine을 ejs로 설정
// 작성을 안해도 사용할 순 있지만 나중에 파일 출력 등에서 꼬이지 않게 하려고 작성
app.set('view engine', 'ejs');

// mysql2를 사용
const mysql = require('mysql2');

// MySQL과 연결할 정보
const connection = mysql.createConnection({
    host : 'localhost',
    user : 'root',
    password : '비밀번호',
    database : 'DB이름',
    port : '3307' // 3306이 이미 사용중면 다른 번호로 지정
});

// MySQL과 연결
connection.connect(
    function(error) {
        if(error) throw error; // 에러가 생기면 던짐
        console.log('MySQL 연결 성공'); // 연결되면 log 생성
    }
);

// 3. listen - 서버 포트 연결
app.listen(8080, () => {
    console.log('접속 : http://localhost:8080')
});

// 4. 라우팅
app.get("/", (request, response) => {
    response.render('main.ejs'); // ejs를 사용해서 render 사용
})

app.get('/member', (request, response) => {
    // sql문
    let sql = 'SELECT * FROM member';

	// MySQL에 query 메소드로 sql문 실행하고 데이터 받아오기
    connection.query(sql, (error, data) => {
        response.render('member.ejs', {member : data}); // 데이터를 보낼 파일과 데이터 이름 지정
    })
})

데이터를 보여줄 member.ejs도 간단하게 작성한다.
- 실습 시간에 Bootstrap을 넣어 화면 크기가 변하면 같이 변형되도록 작성했다. 생략해도 무관.
- 스크립트 태그는 JSP 태그#스크립트 태그 참고.
- VSC, Node.js로 작성하다보니 스크립트도 js 형식으로 작성(특히 for문 같은 경우)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <section class="sec member">
        <div class="container">
            <h2 class="title">소개 페이지</h2>
            <div class="row text-center">
                <div class="col">
                    <table>
                        <tr>
                            <th class="col-1">번호</th>
                            <th class="col-5 email">이메일</th>
                            <th class="col-1">나이</th>
                            <th class="col-1">성별</th>
                            <th class="col-3">생일</th>
                            <th class="col-7">주소</th>  
                        </tr>
                        <!-- DB로부터 받아온 데이터를 ejs를 통해 member라는 이름으로 해당 페이지에 연결함 -->
                        <!-- 스크립트 태그를 사용해서 데이터를 출력 가능 -->
                        <% for(let i = 0; i < member.length; i++) { %>
                        <tr>
                            <td class="id"><%= member[i].id %></td>
                            <td class="email"><%= member[i].email %></td>
                            <td class="age"><%= member[i].age %></td>
                            <td class="gender"><%= (member[i].gender == 'm') ? '남':'여' %></td>
                            <td class="birthday"><%= member[i].birthday %></td>
                            <td class="address"><%= member[i].address %></td>
                        </tr>
                        <% } %>
                    </table>
                </div>
            </div>
        </div>
    </section>
	<!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

nodejs_mysql 2.png

DB에 POST, DELETE, PUT 요청 후 결과 사용하기

POST, DELETE, PUT과 같은 요청들의 경우 DB에 query를 요청한 결과를 ResultSetHeader로 확인할 수 있다.
- 이를 이용해 요청이 제대로 수행 되었는지, 요청에 영향을 받은 id가 무엇인지 확인하여 사용할 수 있다.
- result.insertId나 result.affectedRows로 사용 가능하다.

// db connection과 서버 설정은 위 항목 참고

app.post("/test", async (req, res) => {
	// sql문에 와일드카드 ?를 넣고, query 실행 시 배열로 파라미터를 넘겨주면
	// 파라미터가 String(name = 'nametest' 같이) 들어간다.
	let sql = 'INSERT INTO test (name, age) VALUES (?, ?)';
		
	const result = await connection.query(user_sql, [name, age]);
	console.log(result);
});

라우트로 요청을 보내면 터미널에 요청 결과가 뜬다.

ResultSetHeader {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 26,
  info: '',
  serverStatus: 2,
  warningStatus: 0,
  changedRows: 0
}

웹 페이지에서 받은 데이터를 DB로 보내기

먼저 서버 설정에서 데이터를 보내기 위한 post 메소드를 작성한다.
- HTTP(Hyper Text Transfer Protocol)#HTTP 요청 메서드 참고.
JSP와 Mybatis에서 DB 연결을 위한 파일 및 라이브러리를 따로 작성했던 것처럼 여기에서도 DB연결을 위한 객체를 다른 파일로 분리해 모듈화 시켰다.
- Mybatis 참고.

// 1. module require 
// express
const express = require('express');
const app = express();

// mysql2
const mysql = require('mysql2');
const dbConfig = require('./db'); // db config 객체를 다른 js 모듈로부터 가져온다
const db = mysql.createConnection(dbConfig);
db.connect((error) => { // 연결 확인
    if (error) throw error;
    console.log('MySQL 연결 완료');
});

// 2. use, set
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
app.use(express.json()); // json 형태로 데이터 처리
app.use(express.urlencoded({extended : true})); // queryString 방식으로 데이터 담음

// 3. listen - 서버 포트 연결
app.listen(8080, () => {
    console.log('접속 http://localhost:8080');
});

// 4. 라우팅
app.get('/main', (request, response) => {
    response.render(__dirname + '/views/main.ejs');
});

app.post('/add', (request, response) => {
    // console.log(request.body);
    let {name, age} = request.body; // 웹페이지에서 form으로 넘어온 request의 body에 있는 데이터를 저장
    let values = [name, age];
    
    let sql = 'INSERT INTO EMPLOYEE (name, age) VALUES(?, ?)'
    db.query(sql, values, (error, result) => {
        if (error) throw error;
        console.log('success');
    });
});

// mysql db config
module.exports = {
    host : 'localhost',
    user : 'root',
    password : '비밀번호',
    database : 'DB이름',
    port : '3307' // MySQL의 기본값은 3306
};

웹 페이지에서 input을 사용해서 이름과 나이를 입력받는다.
- JSP로 DB 데이터 CRUD 실행 참고.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section class="sec member">
    <div class="container">
      <h2 class="title">Main</h2>
      <div class="row text-center">
        <div class="col">
          <form class="form-box" action="/add" method="POST"> <!-- action으로 매핑 지정, POST로 데이터 전송 -->
            <h3>글쓰기</h3>
            <div class="box">
              <label>이름</label>
              <input name="name" type="text">
            </div>
            <div class="box">
              <label>나이</label>
              <input name="age" type="text">
            </div>
            <button type="submit">전송</button>
         </form> 
        </div>
      </div>
    </div>
  </section>
</body>
</html>

node_post 2.png